<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2：动态待办列表</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        .todo-container {
            max-width: 600px;
            margin: 3rem auto;
            padding: 0 1rem;
        }

        .todo-header {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .add-todo {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .todo-input {
            flex: 1;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .todo-input:focus {
            border-color: #2563eb;
        }

        .add-btn {
            padding: 0.8rem 1.5rem;
            background-color: #22c55e;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn:hover {
            background-color: #16a34a;
        }

        .todo-list {
            list-style: none;
            gap: 0.8rem;
            display: flex;
            flex-direction: column;
        }

        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }

        .todo-item:hover {
            background-color: #f9fafb;
        }

        .todo-text {
            font-size: 1rem;
            color: #333;
            cursor: pointer;
            transition: color 0.3s;
        }

        /* 完成状态样式 */
        .todo-text.completed {
            color: #6b7280;
            text-decoration: line-through;
        }

        .delete-btn {
            padding: 0.5rem 0.8rem;
            background-color: #ef4444;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .delete-btn:hover {
            background-color: #dc2626;
        }

        .todo-count {
            margin-top: 1.5rem;
            text-align: right;
            font-size: 0.9rem;
            color: #6b7280;
        }
    </style>
</head>

<body>
    <div class="todo-container">
        <h1 class="todo-header">待办事项列表</h1>

        <!-- 添加待办区域 -->
        <div class="add-todo">
            <input type="text" class="todo-input" id="todoInput" placeholder="请输入待办事项...">
            <button class="add-btn" id="addTodoBtn">
                <i class="fa fa-plus"></i> 添加
            </button>
        </div>

        <!-- 待办列表 -->
        <ul class="todo-list" id="todoList"></ul>

        <!-- 数量统计 -->
        <div class="todo-count" id="todoCount">
            当前待办数量：0
        </div>
    </div>

    <script>
        //创建一个待办事项列表，实现以下功能：
        // 输入框中输入内容，点击 "添加" 按钮可新增待办项
        // 每个待办项后面有 "删除" 按钮，点击可删除该项
        // 点击待办项文本可切换完成状态（添加删除线样式）
        // 底部显示当前待办项数量统计
        // 补全代码
        // 获取DOM元素
        const todoInput = document.getElementById('todoInput');
        const addTodoBtn = document.getElementById('addTodoBtn');
        const todoList = document.getElementById('todoList');
        const todoCount = document.getElementById('todoCount');

        // 初始化待办事项数组
        let todos = [];

        // 更新待办事项数量统计
        function updateTodoCount() {
            todoCount.textContent = `当前待办数量：${todos.length}`;
        }

        // 渲染待办事项列表
        function renderTodos() {
            // 清空现有列表
            todoList.innerHTML = '';

            // 遍历待办事项数组，为每个项目创建DOM元素
            todos.forEach((todo, index) => {
                // 创建待办项容器
                const li = document.createElement('li');
                li.className = 'todo-item';

                // 创建待办项文本
                const span = document.createElement('span');
                span.className = `todo-text ${todo.completed ? 'completed' : ''}`;
                span.textContent = todo.text;

                // 为文本添加点击事件，切换完成状态
                span.addEventListener('click', () => {
                    toggleTodoComplete(index);
                });

                // 创建删除按钮
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-btn';
                deleteBtn.innerHTML = '<i class="fa fa-trash"></i> 删除';

                // 为删除按钮添加点击事件
                deleteBtn.addEventListener('click', () => {
                    deleteTodo(index);
                });

                // 组装待办项
                li.appendChild(span);
                li.appendChild(deleteBtn);
                todoList.appendChild(li);
            });

            // 更新数量统计
            updateTodoCount();
        }

        // 添加待办事项
        function addTodo() {
            const text = todoInput.value.trim();

            // 检查输入是否为空
            if (text) {
                // 添加到待办数组
                todos.push({
                    text: text,
                    completed: false
                });

                // 清空输入框
                todoInput.value = '';

                // 重新渲染列表
                renderTodos();
            }
        }

        // 删除待办事项
        function deleteTodo(index) {
            // 从数组中移除指定索引的项目
            todos.splice(index, 1);

            // 重新渲染列表
            renderTodos();
        }

        // 切换待办事项完成状态
        function toggleTodoComplete(index) {
            // 切换完成状态
            todos[index].completed = !todos[index].completed;

            // 重新渲染列表
            renderTodos();
        }

        // 为添加按钮添加点击事件监听器
        addTodoBtn.addEventListener('click', addTodo);

        // 为输入框添加回车键事件监听器
        todoInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                addTodo();
            }
        });
    </script>
</body>

</html>